<script setup lang="tsx">
import { useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { Page } from '@vben/common-ui';
import { VbenIcon } from '@vben-core/shadcn-ui';

import { Button, message, Modal, Row, Space } from 'ant-design-vue';

import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { batchCheck, getAllProduct } from '#/api/core/product';

const enums = {
  platform: [
    {
      label: '全部',
      value: '',
    },
    {
      label: '快手',
      value: 0,
    },
    {
      label: '抖音',
      value: 1,
    },
  ],
  status: [
    {
      label: '全部',
      value: '',
    },
    {
      label: '待审核',
      value: 0,
      color: '#278DF2',
    },
    {
      label: '通过',
      value: 1,
      color: 'green',
    },
    {
      label: '不通过',
      value: 2,
      color: 'red',
    },
    {
      label: '失效',
      value: -1,
    },
  ],
};

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  commonConfig: {
    colon: true,
  },
  schema: [
    {
      // 组件需要在 #/adapter.ts内注册，并加上类型
      component: 'Input',
      // 对应组件的参数
      componentProps: {
        placeholder: '请输入商品名称',
      },
      // 字段名
      fieldName: 'title',
      // 界面显示的label
      label: '商品名称',
    },
    {
      component: 'RadioGroup',
      componentProps: {
        options: enums.platform,
      },
      fieldName: 'shopType',
      label: '平台',
    },
    {
      component: 'Select',
      fieldName: 'checkStatus',
      defaultValue: 0,
      label: '审核状态',
      componentProps: {
        options: enums.status,
        allowClear: true,
      },
    },
  ],
  // 是否可展开
  showCollapseButton: false,
  submitOnChange: true,
  submitOnEnter: false,
  wrapperClass: 'grid-cols-1 md:grid-cols-4',
};

const gridOptions: VxeGridProps = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { align: 'left', type: 'checkbox', width: 100 },

    { title: '序号', type: 'seq', width: 50 },
    { field: 'id', sortable: true, title: 'ID' },
    {
      cellRender: { name: 'CellImage' },
      field: 'img',
      title: '图片',
      width: 120,
    },
    { field: 'title', title: '商品名称' },
    {
      cellRender: { name: 'CellTag', options: enums.platform },
      field: 'shopType',
      sortable: true,
      title: '平台',
    },
    { field: 'price', sortable: true, title: '补贴金额' },
    { field: 'createdTime', sortable: true, title: '时间' },
    {
      cellRender: { name: 'CellTag', options: enums.status },
      field: 'checkStatus',
      sortable: true,
      title: '状态',
    },
    {
      align: 'center',
      field: 'operation',
      fixed: 'right',
      slots: { default: 'operation' },
      headerAlign: 'center',
      showOverflow: false,
      title: '操作',
      width: 100,
    },
  ],
  editConfig: {
    mode: 'row',
    trigger: 'click',
  },
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    response: {
      result: 'list',
      total: 'total',
      list: 'list',
    },
    ajax: {
      query: async ({ page }, formValues) => {
        const res = await getAllProduct({
          currentPage: page.currentPage,
          pageSize: page.pageSize,
          filter: {
            ...formValues,
          },
        });
        return res.data;
      },
    },
  },
  showOverflow: false,
};

const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });

function onRefresh() {
  gridApi.query();
}

const selectRows: any = ref([]);

const [Modal1, modalApi] = useVbenModal({
  confirmText: '通过',
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    batchCheck({
      ids: selectRows.value.map((item: any) => item.id),
      checkStatus: 1,
    }).then((res) => {
      if (res.success === true) {
        message.success('上架成功');
        onRefresh();
        modalApi.close();
      } else {
        message.error(res.msg);
      }
    });
  },
});

function batchUp(row?: any) {
  const rows = row ? [{ ...row }] : gridApi.grid.getCheckboxRecords();

  if (rows.length === 0) {
    message.warning('请选择要上架的商品');
  } else {
    selectRows.value = rows.filter((item: any) => item.checkStatus === 0);
    if (selectRows.value.length === 0) {
      message.warning('所选商品已全部上架');
      return;
    }
    modalApi.open();
  }
}
function reject() {
  Modal.confirm({
    title: '驳回提示?',
    content: (
      <p>
        是否确认驳回以下商品?
        <p style="color:blue">
          {selectRows.map((t: any) => t.title).join('、')}
        </p>
      </p>
    ),
    onOk() {
      return new Promise((resolve, reject) => {
        batchCheck({
          ids: selectRows.value.map((item: any) => item.id),
          checkStatus: 2,
        })
          .then((res) => {
            if (res.success === true) {
              message.success('驳回成功');
              onRefresh();
              resolve(true);
              modalApi.close();
            } else {
              message.error(res.msg);
              reject(res.msg);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
  });
}
</script>
<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-tools>
        <Space>
          <Button type="primary" @click="batchUp()"> 批量上线 </Button>
        </Space>
      </template>

      <template #operation="{ row }">
        <Button v-if="row.status === 0" type="primary" @click="batchUp(row)">
          上线
        </Button>
      </template>
    </Grid>
    <Modal1 title="上线提示">
      <div>
        <Row justify="start">
          <VbenIcon icon="mdi-light:alert-octagon" style="color: orangered" />
          是否确认上架以下商品?
        </Row>
        <p style="color: blue">
          {{ selectRows.map((t:any) => t.title).join('、') }}
        </p>
      </div>
      <template #append-footer>
        <Button @click="reject"> 驳回 </Button>
      </template>
    </Modal1>
  </Page>
</template>

<style lang="scss" scoped>
.page {
  background: white;
  padding: 20px;
}
</style>
